<template>
	<view class="flex-col page">
		<view class="flex-col justify-start relative group">
		
			<view class="flex-col section">
				<view class="" 	style="position: fixed;top: 0;left: 0;right: 0;z-index: 99;background-color: #fdeffc;		padding: 82rpx 24rpx 20rpx;">
					<view class="tabegr">
						<view class="lest">
							<view class="etagw " v-for="(item,index) in tablist" :key="index"
								:class=" tadouble ==index?'active':'' " @click="changtab(index)">
								{{item}}
							</view>

						</view>
						<image class="image" src="/static/assets/7afb740486fbcafc6ed7bf0af1f5ea68.png" />


					</view>


					<view class="dedsu">
						<view class="lesele">
							<view class="dlsk " v-for="(item,index) in lisdeft" :key="index"
								:class="doublese==index?'acytiue':''  " @click="changsedef(index)">
								{{item}}
							</view>

						</view>

						<view class="sesmend">
							<view class="onpan " v-for="(item,index) in agerlst" :key="index"
								style="margin-right: 10rpx;" @click="gosex(index)">

								<view class="onpan">

									<image class="nosu" v-if="agdouble ==index " src="/static/acti/ser.png" mode="">
									</image>
									<image class="nosu" v-else src="/static/acti/bht.png" mode=""></image>
								</view>
								<view class="dlsk2">
									{{item}}
								</view>
							</view>
						</view>

					</view>

				</view>
			</view>
			<view class="flex-col pos" style="margin-top: 260rpx;">
				<view class="flex-col  list-item" style="margin-bottom: 30rpx;" v-for="(item, index) in 2" :key="index"
					@click="godetails">
					<view class="flex-row justify-between">
						<view class="flex-row">
							<image class="image_3" @click.stop="godeinfo"
								src="/static/assets/dd0eea012a8ae34b33342315b7ab8fb4.png" />
							<view class="flex-col items-start self-center group_4">
								<text class="font text_8">杨紫夏</text>
								<text class="font_2 text_9 mt-11">2025/2/17</text>
							</view>
							<image class="self-start image_5 image_6"
								src="/static/assets/8360679ad1fc2fe9f086d094de35b697.png" />
						</view>
						<view class="flex-row items-center self-start">
							<image class="shrink-0 image_4" src="/static/assets/6459ce556896741faee51deb1e567a86.png" />
							<text class="ml-6 font_3">123</text>
						</view>
					</view>
					<view class="flex-col group_5 mt-9">
						<view class="flex-col">
							<text class="self-stretch font_4">
								荐傀。豫茂绪鹅鉴澳拧改玉匝握戒指新休沟月喘等酱弊猫隆愁誉裁疾告笼车蠢实症抚析匠垫彪骚哼号宪屏宝蠕灸微带幕涛雹汉舵浊穷靠颂波姓庆画绳拾、磷奴楼都癌浦使吹捕倍诫磺接顷达隙扼烫服意蓝帽添挑？
							</text>
							<view class="">
								<image v-if=" index/2==0 " class="mt-8 self-start image_7"
									src="/static/assets/082ca53ffbb26b742c57ba875c26e216.png" />
								<view class="cojms" v-else>
									<image src="/static/acti/2.webp" mode=""></image>
									<image src="/static/acti/2.webp" mode=""></image>
									<image src="/static/acti/2.webp" mode=""></image>
									<image src="/static/acti/2.webp" mode=""></image>
								</view>
							</view>
						</view>
						<view class="mt-10 flex-row items-center">
							<image class="image_2" src="/static/assets/fa18c17fa2fa5582348432a2b5d32ab9.png" />
							<text class="ml-6 font_5">12km</text>
						</view>
						<view class="mt-10 flex-row">
							<view class="flex-row items-center">
								<image class="shrink-0 image_4"
									src="/static/assets/cb9625205445bfc4ca49cf2b95f26bd0.png" />
								<text class="ml-6 font_3 text_10">12</text>
							</view>
							<view class="flex-row items-center ml-25">
								<image class="shrink-0 image_4"
									src="/static/assets/b45758093dcd14a28f683ca65d36ddfd.png" />
								<text class="font_3 text_11 ml-5">评论</text>
							</view>
							<view class="flex-row items-center ml-25">
								<image class="shrink-0 image_5"
									src="/static/assets/8e3933f1b81d5185cac0ebc3919c55ba.png" />
								<text class="ml-6 font_3">78</text>
							</view>
							<view class="flex-row items-center ml-25">
								<image class="shrink-0 image_4"
									src="/static/assets/77cf062e541d312e41ccf311766a569e.png" />
								<text class="font_3 ml-5">9</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="mainbotm">
				<view class="onehome oenmy" @click="goabbar(0)">
					<image src="/static/datab/00.png" mode=""></image>
					<!-- <view class="teben">
						聊天
					</view> -->
				</view>
				<view class="onehome acti" @click="goabbar(1)">
					<image src="/static/datab/1.png" mode=""></image>
					<view class="teben">
						动态
					</view>
				</view>
				<view class="onehome oenmy" @click="goabbar(2)">
					<image src="/static/datab/2.png" mode=""></image>
					<!-- 	<view class="teben">
						首页
					</view> -->
				</view>
				<view class="onehome  oenmy" @click="goabbar(3)">
					<image src="/static/datab/4.png" mode=""></image>
					<!-- 	<view class="teben">
						我的
					</view> -->
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {

				tadouble: 0,
				tablist: ['世界动态', '好友动态'],
				tadouble: 1,
				items: [null, null],
				lisdeft: ['默认', '最新发布', '距离最近'],
				doublese: 0,
				agerlst: ['只看男生', '只看女生'],
				agdouble: 0,
			};
		},

		methods: {
			// 个人动态详情
			godeinfo() {
				uni.navigateTo({
					url: '/pages/newtreds/myInfodel'
				})
			},
			// 去详情
			godetails() {
				uni.navigateTo({
					url: '/pages/newtreds/detail'
				})
			},
			changtab(i) {
				this.tadouble = i
			},
			goabbar(i) {
				switch (i) {
					case 0:
						uni.switchTab({
							url: '/pages/chat/chat'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/newtreds/index'
						})
						// uni.switchTab({
						// 	url: '/pages/friend/friend'
						// })
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/play/index'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/mine/mine'
						})

						break;

				}
			},

			changsedef(i) {
				this.doublese = i
			},
			gosex(i) {
				this.agdouble = i

			}
		},
	};
</script>

<style lang="scss">
	.adijd {
		color: #FB75D6;
		font-size: 28rpx;
	}

	.lest {
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.active {

		color: #2A222F !important;
		font-size: 48rpx !important;

		position: relative;
		display: inline-block;
	}

	.active::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		/* 调整此值以改变下划线与文本之间的距离 */
		left: 50%;
		/* 将起点设为文本的中间 */
		width: 30%;
		/* 根据实际需要调整宽度，这里是相对于文本容器的宽度 */
		height: 8rpx;
		/* 下划线的厚度 */
		border-radius: 50rpx;
		background: #FB75D6;
		/* 下划线的颜色 */
		transform: translateX(-50%);
		/* 将下划线向左移动其自身宽度的一半，使其居中 */
	}

	.etagw {
		margin-right: 40rpx;
		color: #2A222F;
		font-size: 32rpx;
	}

	.tabegr {
		padding: 0rpx 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cojms {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 创建3列，每列宽度相同 */
		grid-auto-rows: minmax(50px, auto);
		/* 设置行高，根据需要调整 */
		gap: 10px;

		/* 可选：设置网格项之间的间距 */
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 24rpx;
		}
	}

	// 高亮选择
	.acti {
		background: rgba(248, 239, 249, 1);
		height: 75%;
		padding: 0 50rpx;
		border-radius: 100rpx;

	}

	.mainbotm {
		height: 128rpx;
		// margin: 0 40rpx 40rpx;
		padding: 0 30rpx 30rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		box-shadow: 0px 6px 16px 0px #21465414;


		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.oenmy {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 96rpx;
		vertical-align: middle;
		border-radius: 50%;
		// background-color: #f7f8fa;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		// background-color: rgba(255, 255, 255, );
		// height: 200rpx;

		backdrop-filter: blur(4rpx);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, .1) -30%, rgba(255, 255, 255, .1) 50%);
		// padding: 20rpx;



		// backdrop-filter: blur(6px);
		//     background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) -30%, rgba(255 ,255, 255, .5) 50%);

	}

	.onehome {
		display: flex;
		align-items: center;

		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.teben {
			margin-left: 10rpx;
			color: rgba(251, 117, 214, 1);
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.dgelock {
		display: flex;
		align-items: center;

		.skme {
			margin-left: 10rpx;
			color: #C3B0C3;
			font-size: 24rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.onimg {
		margin: 20rpx 0;

		image {
			width: 60% !important;
			border-radius: 40rpx;
		}
	}

	.vwehua {
		color: #2A222F;
		font-size: 28rpx;
		line-height: 1.4;
	}

	.skiel {
		width: 83%;
		// background-color: #2A222F;
	}

	// page {
	// 	background-color: #fff2f6;
	// }

	.consus {

		border-radius: 30rpx 30rpx;
		width: 100%;
		background-color: #fff;
	}

	.lishand {
		padding: 30rpx;
		display: flex;
		// align-items: center;
		justify-content: space-between;
	}

	.tinsd {
		margin: 16rpx 0;
		color: #837487;
		font-size: 24rpx;
	}

	.topan {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.resu {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.renusm {
			color: #837487;
			font-size: 28rpx;
		}
	}

	.elpaos {
		display: flex;
		align-items: center;

		.leian {
			margin-right: 20rpx;
			color: #2A222F;
			font-weight: 700;
			font-size: 32rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.heqadins {
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}
	}

	.dedsu {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sesmend {
		display: flex;
		align-content: center;
	}

	.acytiue {
		color: #FB75D6 !important;
		background: #FF9AE933;

		border-radius: 50rpx;

	}

	.onpan {
		display: flex;
		align-items: center;
	}

	.nosu {
		margin-right: 6rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.lesele {
		// width: 60%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dlsk2 {
		letter-spacing: 2rpx;
		color: #837487;
		font-size: 24rpx;
	}

	.dlsk {
		padding: 10rpx 20rpx;
		letter-spacing: 2rpx;
		color: #837487;
		font-size: 24rpx;
	}
	page {
		padding:50rpx 30rpx;
		background-color: #fdeffc !important;
	}
	

</style>

<style scoped lang="css">
	.ml-23 {
		margin-left: 46rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.ml-3 {
		margin-left: 6rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.ml-25 {
		margin-left: 50rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	/* 	.page {
		padding-bottom: 68rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	} */

	.group {
		/* padding-bottom: 696rpx; */
	}

	/* 	.section {
		padding: 82rpx 24rpx 1202rpx;
		background-image: url('/static/assets/e9cd3fc4ee4eabc1262262a469ab1c21.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	} */

/*  */

	.group_2 {
		padding: 0 8rpx;
	}

	.group_3 {
		padding-bottom: 16rpx;
	}

	.text {
		color: #2a222f;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 45.12rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 29.64rpx;
		font-weight: 700;
		color: #2a222f;
	}

	.text_2 {
		line-height: 29.82rpx;
		font-weight: unset;
	}

	.image {
		width: 48rpx;
		height: 48rpx;
	}

	.section_2 {
		margin-left: 72rpx;
		background-color: #fb75d6;
		border-radius: 4rpx;
		width: 40rpx;
		height: 8rpx;
	}

	.text-wrapper {
		padding: 12rpx 0;
		background-color: #ff9ae933;
		border-radius: 32rpx;
		width: 96rpx;
		height: 48rpx;
	}

	.text_3 {
		color: #fb75d6;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 22.24rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 20.78rpx;
		color: #837386;
	}

	.text_4 {
		line-height: 22.4rpx;
	}

	.text_5 {
		line-height: 22.22rpx;
	}

	.image_2 {
		width: 32rpx;
		height: 32rpx;
	}

	.text_6 {
		line-height: 22.06rpx;
	}

	.text_7 {
		color: #fb75d6;
		line-height: 22.24rpx;
	}

	.pos {
		margin-top: 50rpx;
		padding-bottom: 200rpx;
		/* 	position: absolute;
		left: 0;
		right: 0;
		top: 296rpx; */
	}

	.list-item {
		padding: 32rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
	}



	.image_3 {
		border-radius: 64rpx;
		width: 96rpx;
		height: 96rpx;
	}

	.group_4 {
		margin-left: 24rpx;
	}

	.text_8 {
		line-height: 29.4rpx;
	}

	.text_9 {
		line-height: 22.08rpx;
	}

	.image_5 {
		width: 36rpx;
		height: 36rpx;
	}

	.image_6 {
		margin-top: 8rpx;
	}

	.image_4 {
		width: 40rpx;
		height: 40rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 20.78rpx;
		color: #837386;
	}

	.group_5 {
		padding-left: 120rpx;
		padding-right: 4rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 40rpx;
		color: #2a222f;
	}

	.image_7 {
		border-radius: 32rpx;
		width: 308rpx;
		height: 360rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 17.48rpx;
		color: #c2afc3;
	}

	.text_10 {
		line-height: 20.38rpx;
	}

	.text_11 {
		line-height: 25.68rpx;
	}

	.section_3 {
		padding: 16rpx 88rpx;
		background-color: #ffffff;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		box-shadow: 0rpx 2rpx 2rpx #ffffff99 inset;
	}

	.section_4 {
		padding: 24rpx 52rpx;
		background-color: #f7eff8;
		border-radius: 48rpx;
		height: 96rpx;
	}

	.text_13 {
		color: #fb75d6;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 26.32rpx;
	}
</style>